<!-- 加载倾斜摄影图层 -->
<template>
  <div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { MapboxLayer } from '@deck.gl/mapbox'
import { Tile3DLayer } from '@deck.gl/geo-layers'
import {Tiles3DLoader} from '@loaders.gl/3d-tiles'
// const core_1 = require('@math.gl/core')
import * as core_1 from '@math.gl/core'

export default {
  setup() {
    const state = reactive({
      value: 'value'
    })

    onMounted(() => {

    })

    const map = getCurrentInstance().proxy.$root.$map

    function show3DTiles() {
      const layerConfig = {
        id: '3dTiles-xxxxxx',
        describe: '倾斜摄影',
        url: 'http://192.168.1.210/qxsy/data/zzdx/tileset.json',
        layerType: '3DTiles'
      }
      const layer = load3DTiles(layerConfig)

      map.addLayer(layer)
    }

    //添加cesium格式3dtiles
    function load3DTiles(layerConfig) {
      const layer = new MapboxLayer({
        id: layerConfig.id,
        type: Tile3DLayer,
        data: layerConfig.url,
        loader: Tiles3DLoader,
        onTileError: (err) => {
          console.log(err)
        },
        onTilesetLoad: (tileset) => {
          tileset.setProps({ maximumScreenSpaceError: 1 })
          const { cartographicCenter, zoom} = tileset

          layer.viewState = {
            center:cartographicCenter,
            zoom
          }
          //设置x、y、z偏移
          const mdMtx = new core_1.Matrix4().makeTranslation(1,1,1)

          tileset.modelMatrix = mdMtx
          map.jumpTo(layer.viewState)
          //设置比例
          //let test2=new core_1.Matrix4().scale(1.5)
          //tileset.modelMatrix=test1

          /*this.map.jumpTo(
              this.viewState
            );*/
        }
      })

      return layer
    }

    return {
      ...toRefs(state),
      show3DTiles
    }
  }
}

</script>

<style lang='less' scoped>

</style>
